<template>
  <view class="listLimited_view">
    <view class="back_img">
      <img
        :src="gIndexImage.img"
        alt=""
        style="width: 100%; height: 350px"
        srcset=""
      />
    </view>

    <view class="">
      <up-count-down
        :time="30 * 60 * 60 * 1000"
        format="HH:mm:ss"
      ></up-count-down>
    </view>
    <view class="listLimited">
      <view
        class="Limited_item"
        v-for="(item, index) in listLimited.List"
        :key="index"
      >
        <view class="view_img">
          <img
            :src="baseUrl + 'api/uploads/' + item.image"
            alt=""
            style="
              width: 140px;
              height: 140px;
              border-top-left-radius: 10px;
              border-bottom-left-radius: 10px;
            "
            srcset=""
          />
        </view>
        <view class="view_cent">
          <view class="leftView">
            <p class="goods_name">{{ item.goodsName }}</p>
            <p class="price_span">
              <view class="">
                <u-count-down
                  :timestamp="calculateTimeDifference(item.limitedEndTime)"
                  :show-days="false"
                  :show-hours="false"
                  :separator="'zh'"
                ></u-count-down>
              </view>
              <view class="">
                <span class="span1">抢手价￥</span>
                <span class="span2">{{ item.price }} </span>
                <span class="span3"> ￥</span>
                <span class="span4">{{ item.beforePrice }}</span>
              </view>
            </p>
          </view>
          <view class="rightView">
            <u-circle-progress active-color="#2979ff" :percent="90" width="160">
              <view class="u-progress-content">
                <text class="u-progress-info">即将售罄</text>
              </view>
            </u-circle-progress>
            <p>
              <button
                class="text-lg text-white p_buttom"
                @click="goPage(`/pages/goods/index?id=${item.goodsId}`)"
              >
                去抢购
              </button>
            </p>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getgetIndexImage } from "@/api/shop";
import { getlistLimited } from "@/api/goods";

import {
  reactive,
  shallowRef,
  defineComponent,
  onMounted,
  ref,
  onUnmounted,
} from "vue";
import {
  onLoad,
  onUnload,
  onShareAppMessage,
  onPageScroll,
} from "@dcloudio/uni-app";
const baseUrl = `${import.meta.env.VITE_APP_BASE_URL || ""}/`;
const gIndexImage = reactive<{ img: string }>({
  img: "https://mzd-admin.muzhandao.com/api/uploads/image/20240507/39c7c9c7-e24c-4eae-8a46-2a33ed6c0a50.png",
});
const listLimited = reactive<{ List: [] }>({
  List: [],
});

onLoad(() => {
  getgetIndexImage(1).then((res) => {
    console.log(res, "res");
    gIndexImage.img = baseUrl + "api/uploads/" + res;
  });
  getlistLimited().then((res) => {
    console.log(res, res.lists, "res11111111");
    listLimited.List = res.lists;
  });
});

const goPage = (url: string) => {
  uni.navigateTo({ url: url });
};

const calculateTimeDifference = (limitedEndTime: number): number => {
  const currentTime = Math.floor(Date.now() / 1000); // Current time in seconds
  return (limitedEndTime - currentTime) * 1000;
};
</script>

<style lang="scss" scoped>
.listLimited_view {
  background: #dd2f38 !important;
  min-height: 100vh;
}
.Limited_item {
  display: flex;
  background: #fff;
  margin: 10px;
  margin-bottom: 20px;
  height: 140px;
  border-radius: 10px;

  .view_img {
    flex: 1;
    width: 140px;
  }

  .view_cent {
    flex: 2;

    padding-left: 10px;
    display: flex;
    .leftView {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      width: calc(100% - 160rpx - 10rpx);
    }
    .rightView {
      width: 160rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      margin-right: 10rpx;
    }
    .goods_name {
      font-size: 20px;
      font-weight: 700;
    }

    .price_span {
      margin-bottom: 10px;
      .span1 {
        font-size: 16px;
        font-weight: 700;
        color: red;
      }

      .span2 {
        font-size: 18px;
        font-weight: 700;
        color: red;
      }

      .span3 {
        font-size: 12px;
        text-decoration: line-through;
      }

      .span4 {
        font-size: 12px;
        text-decoration: line-through;
      }
    }
    .p_buttom {
      width: 160rpx;
      margin-bottom: 5px;
      margin-right: 0px;
      background: url("http://mzd-admin.muzhandao.com/api/uploads/image/20240905/0ae10729-f13c-42d1-b140-9d0c8b8c647b.png");
      background-size: 100% 100%;
    }
  }
}
.u-progress-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.u-progress-dot {
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background-color: #fb9126;
}

.u-progress-info {
  font-size: 28rpx;
  padding-left: 16rpx;
  letter-spacing: 2rpx;
}
</style>
<style lang="scss">
.u-circle-progress {
  padding: 20px;
}
</style>